<template>
  <!-- 勘误页 -->
  <div class="book-err">
    <!-- 导航 -->
    <van-nav-bar
      title="图书勘误"
      right-text="我的勘误"
      left-arrow
      @click-left="$router.go(-1)"
    />
    <!-- err-body -->
    <div v-if="!loading" class="err-body">
      <!-- 导航栏 -->
      <div class="err-nav">
        <span
          class="err-nav-item"
          :class="isLight == 0 ? 'active' : ''"
          @click="isLight = 0"
          >已确定</span
        >
        <span
          class="err-nav-item"
          :class="isLight == 1 ? 'active' : ''"
          @click="isLight = 1"
          >未确定</span
        >
      </div>
      <!-- 内容 -->
      <div class="err-main">
        <!-- 确定的 -->
        <div class="sure" v-show="isLight == 0">
          <div class="err-item" v-for="e in errorData" :key="e.id">
          <p>
            用户
            <span class="nickname">{{ e.userNickName }}</span>
            提交于{{ e.commitDate.substring(0, 10) }}
          </p>

          <p>第{{ e.page }}页,{{ e.line }}</p>

          <p v-html="e.content"></p>
        </div>
        </div>
        <!-- 不确定的 -->
        <div class="unsure" v-show="isLight == 1">
          <div class="err-item" v-for="u in unErrorData" :key="u.id">
          <p>
            用户
            <span class="nickname">{{ u.userNickName }}</span>
            提交于{{ u.commitDate.substring(0, 10) }}
          </p>

          <p>第{{ u.page }}页,{{ u.line }}</p>

          <p v-html="u.content"></p>
        </div>
        </div>
      </div>
    </div>
    <div v-if="loading" class="loading">
      <van-loading size="24px" vertical>加载中...</van-loading>
    </div>
    <!-- 底部 -->
    <van-tabbar inactive-color="#2c59b7">
      <van-tabbar-item>介质</van-tabbar-item>
      <van-tabbar-item>印次</van-tabbar-item>
      <van-tabbar-item>类型</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { BookErrAPI } from "@/apis";
export default {
  props: ["errId"],
  data() {
    return {
      // 
      loading: true,
      // 确定的
      errorData: {},
      // 未确定的
      unErrorData: {},
      // 是否高亮
      isLight: 0,
    };
  },
  mounted() {
    this.loading = true
    this.getErrorData(this.errId);
    this.getUnErrorData(this.errId);
  },
  methods: {
    // 网络请求(确定)
    async getErrorData(id) {
      let { data } = await this.$http(BookErrAPI(id));
      this.errorData = data.erratum;
      this.$nextTick(() => {
        this.loading = false
      })
    },
    // 网络请求(未确定)
    async getUnErrorData(id) {
      let { data } = await this.$http(BookErrAPI(id,'unconfirumed'));
      this.unErrorData = data.erratum;
    },
  },
};
</script>

<style lang="scss" scoped>
.book-err {
  position: relative;
  width: 100vw;
  background-color: #fff;
  z-index: 1999;
  .van-nav-bar {
    padding: 2px 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }
  .err-body {
    padding: 50px 0;
    // 导航
    .err-nav {
      padding: 15px 15px 0;
      display: flex;
      justify-content: center;
      align-items: center;
      border-bottom: 1px solid var(--more-bg-white);
      .err-nav-item {
        padding-bottom: 15px;
        margin: 0 10px;
        color: var(--more-font-grey);
        font-size: 14px;
        &.active {
          font-size: 20px;
          color: var(--book-name-font-black);
        }
      }
    }
    // 内容
    .err-main{
      .err-item{
        padding: 15px 15px;
        border-bottom: 1px solid var(--more-bg-white);
        p{
          line-height: 20px;
          font-size: 14px;
          .nickname{
            padding: 0 2px;
            color: var(--theme-blue);
          }
        }
      }
    }
  }
}
</style>